<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main.toolChest.scenes"><i class="fa fa-home"></i> 首页</a></li>
        <li><a ui-sref="main.toolChest.scenes.readList">流量场景包</a></li>
        <li class="active" ng-bind="title"></li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="wrapper-md content">
    <div class="panel panel-default">
        <!-- 头部 -->
        <div class="panel-heading font-bold">
            <a class="btn btn-sm btn-icon btn-rounded btn-default pull-right m-t-n-xs"
               ui-sref="main.toolChest.scenes.addScenes"></a>
        </div>

        <!--表单-->
        <div class="panel-body">
            <form class="form-horizontal" name="user_form">
                <div class="form-group">
                    <label class="col-sm-1 control-label"><button class="ifc-btn btn-primary"  ng-click="save()">保 存</button></label>
                    <label class="col-sm-1 control-label"><button class="ifc-btn btn-dark" ui-sref="main.toolChest.scenes.readList" type="submit">返 回</button></label>
                </div>
                <!--<div class="line line-dashed b-b line-lg pull-in"></div>-->
                <div class="form-group">
                    <label class="col-sm-1 control-label"><span class="text-danger wrapper-sm">*</span>场景包类型:</label>
                    <label class="col-sm-1 control-label" ng-model="scenesType" name="scenesType" id="scenesType" value="1">公共</label>
                    <!--<input type="text" class="form-control" ng-model="scenesType" name="scenesType" id="scenesType" value="1">-->
                    <!--<div class="col-sm-2">
                        <select class="form-control" ng-model="scenesType" name="scenesType" id="scenesType">
                            <option value="">&#45;&#45;请选择&#45;&#45;</option>
                            <option value="1">公共</option>
                            <option value="2">自定义</option>
                        </select>
                    </div>-->
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label"><span class="text-danger wrapper-sm">*</span>所属公司:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" ng-model="company" name="company" id="company" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label"><span class="text-danger wrapper-sm">*</span>场景包名称:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" ng-model="scenesName" name="scenesName" id="scenesName">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">支持活动名称:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" ng-model="activeName" name="activeName" id="activeName">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">活动链接:</label>
                    <div class="col-sm-6">
                        <!--searchParams.activeLink-->
                        <input type="text" class="form-control" ng-model="activeLink" name="activeLink" id="activeLink">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">说明:</label>
                    <div class="col-sm-6">
                        <!--<input type="text" class="form-control" ng-model="searchParams.scenesName">-->
                        <textarea class="form-control" rows="3" name="content" ng-model="content" ng-model="textarea" id="content"></textarea>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="col-sm-12">
                        <label class="col-sm-2"><span class="text-danger wrapper-sm">*</span>场景包广告位:&nbsp;&nbsp;<a rel="#" ng-click="add()">添加</a></label>
                        <!--<label  ng-click="add()"><a rel="#">添加</a> </label>-->
                        <label class="col-sm-1 control-label pull-right" ng-click="deleteAll()"><a rel="#">全部清空</a> </label>
                    </div>
                    <div class="col-sm-12">
                        <table  class="table table-striped b-t b-light text-center">
                            <thead>
                            <tr>
                                <td class="col-sm-2">平台名称</td>
                                <td class="col-sm-2">媒体名称</td>
                                <td class="col-sm-2">广告位</td>
                                <td class="col-sm-1">尺寸</td>
                                <td class="col-sm-1">流量类型</td>
                                <td class="col-sm-1">广告位类型</td>
                                <!--<td class="col-sm-1">计费方式</td>-->
                                <td class="col-sm-1">日展现量（万）</td>
                                <td class="col-sm-1">操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="item in copyShowMedia">
                                <td class="hidden" id="media"><input ng-model="subCheckBox" name="orders" ng-value="{{item.id}}" type="checkbox"/></td>
                                <td>{{item.platformName}}</td>
                                <td>{{item.mediaName}}</td>
                                <td>{{item.slotName}}</td>
                                <td>{{item.slotSize}}</td>
                                <td ng-if="item.flowType==1">web</td>
                                <td ng-if="item.flowType==2">app</td>
                                <td ng-if="item.flowType!=1 && item.flowType!=2"></td>
                                <td>{{item.slotType}}</td>
                                <!--<td>{{item.createPer}}</td>-->
                                <td>{{item.dayShowVolume}}</td>
                                <td><button type="button" class="btn btn-default btn-xs" ng-click="deleteEditor(item.id)">删除</button></td>
                            </tr>
                            </tbody>
                        </table>
                        <pagination conf="pagingData2" data="copyShowMedia" change-page='goTo(pagingData2)'></pagination>
                    </div>
                </div>

                <!--<div class="line line-dashed b-b line-lg pull-in"></div>
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label">状态:</label>
                    <label class="control-label">{{record.enable=='Y'?'启用':'停用'}}</label>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                <div class="form-group">
                    <label class="col-sm-1 control-label pull-right">
                        <a ui-sref="main.toolChest.scenes.readList">
                            <button class="btn btn-default w-xs">返回</button>
                        </a>
                    </label>
                </div>-->
            </form>
        </div>
    </div>
    <form id="saveRecharge">
        <div class="modal fade bs-example-modal-lg" tabindex="-1" data-backdrop="static" id="chongz" role="dialog" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="gridSystemModalLabel">选择广告位</h4>
                    </div>
                    <div class="modal-body" id="RechargeBody">

                        <div class="panel-body">
                            <!-- 头部 -->
                            <form  class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control" placeholder="媒体名称" ng-model="mediaName" name="mediaName" id="mediaName">
                                    </div>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control" placeholder="平台名称" ng-model="platformName" name="platformName" id="platformName">
                                    </div>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control" placeholder="全部尺寸" ng-model="slotSize" name="slotSize" id="slotSize">
                                    </div>
                                    <div class="col-sm-2">
                                        <select class="form-control" ng-model="flowType" name="flowType" id="flowType">
                                            <option value="">流量类型</option>
                                            <option value="1">web</option>
                                            <option value="2">app</option>
                                        </select>
                                    </div>
                                    <div class="row" align="center">
                                        <div class="col-md-1">
                                            <label class="col-sm-1 control-label"><button class="ifc-btn btn-primary" ng-click="queryMedia('query')" type="submit">查 询</button></label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="tableTitle">
                        <span>
                          <div class="fCheckBox">
                            <input type="checkbox" id="selectAll" ng-model="selectAll" ng-click="checkedAll()">
                            <label class="" for="selectAll">
                            </label>
                          </div>
                        </span>
                            <span>媒体名称</span>
                            <span>广告位</span>
                            <span>尺寸</span>
                            <span>流量类型</span>
                            <span>日展现量(万)</span>
                        </div>
                        <ul class="tableContent" id="top">
                            <li ng-repeat="item in dedupList">
                            <span class="textR width10">
                              <div class="fCheckBox">
                                  <input type="checkbox" id="{{'checkbox'+$index}}" name="checkpig" ng-model="item.isChecked" ng-value="{{item.id}}"  ng-click='singleCheck(item)'>
                                  <label class="" for="{{'checkbox'+$index}}">
                                  </label>
                              </div>
                          </span>
                                <span class="text-ellipse" title="{{item.mediaName}}">{{item.mediaName}}</span>
                                <span class="text-ellipse" title="{{item.slotName}}">{{item.slotName}}</span>
                                <span>{{item.slotSize}}</span>
                                <span>{{item.flowType=='1'?'Web':'App'}}</span>
                                <span>{{item.dayShowVolume}}</span>
                            </li>
                            <li ng-show='dedupList==""' class="tableB">暂无数据</li>
                        </ul>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" ng-click="addArr()">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
            </div>
    </form>
</div>
<style>
    ul,li{
        padding:0;
        margin:0;
    }
    #myTable1 th {
        height: 58px;
    }

    #myTable1 th:last-child {
        border-right: 1px solid #d8d8d8;
    }

    .tableTitle {
        width: 100%;
        font-size: 0;
        height: 60px;
        text-align: justify;
        border: 1px solid #d2d2d2;
    }

    .tableTitle span {
        width: 144px;
        /* border: 1px solid #d2d2d2; */
        height: 58px;
        background: #f7f8f9;
        font-size: 14px;
        color: #393d40;
        line-height: 58px;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
    }

    .tableContent {
        max-height: 464px;
        overflow-y: auto;
        overflow-x: hidden;
        width: 870px;
    }

    .tableContent li {
        font-size: 0;
        text-align: justify;
    }

    .tableContent li span {
        width: 141px;
        /* border: 1px solid #d2d2d2; */
        height: 58px;
        font-size: 14px;
        color: #393d40;
        line-height: 58px;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        border-bottom: 1px solid #d2d2d2;
        border-left: 1px solid #d2d2d2;
        box-sizing: border-box;
    }

    .tableB {
        width: 870px;
        height: 58px;
        border: 1px solid #d2d2d2;
        border-top: 0;
        font-size: 14px !important;
        text-align: center !important;
        line-height: 58px;
    }

    .sceneBtn {
        width: 100px;
        height: 34px;
        border-radius: 4px;
        margin-left: 10px;
        border-color: #ffb135;
        border: 0;
        font-size: 14px;
        text-align: center;
        line-height: 34px;
    }

    .textWitdh {
        width: 200px;
        height: 42px;
        line-height: 42px;
    }

    .btn-lg {
        padding: 10px 40px;
        font-size: 14px;
    }

    .sceneBack {
        color: #fff;
        background: #ffb135;
        border: 0;
        font-size: 14px;
        box-sizing: border-box;
        margin-left: 20px;
    }

    .btnColor {
        background: #3b98fd;
        color: #fff;
    }

    .btnColor1 {
        background: #ffb135;
        color: #fff;
    }

    .btnColor2 {
        background: #ff7070;
        color: #fff;
    }

    .editorInput {
        width: 374px;
        height: 42px;
    }

    .planName {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
    }

    .areaEditor {
        width: 540px;
        height: 140px;
        color: #393d40;
        font-size: 14px;
        padding: 5px 5px 0 10px;
    }

    .btnBox {
        margin-top: 40px;
    }

    .content-body-layer {
        /* width: 82%; */
        min-height: 75%;
        height: 85%;
        overflow-y: auto;
        position: absolute;
        /* left: 12%;
      top: 98px; */
        box-sizing: border-box;
        padding: 20px 30px;
    }

    .subTitle {
        font-size: 14px;
        width: 175px;
    }

    .subTitle i {
        color: #ff7070;
    }

    .mediaTitle {
        font-size: 16px;
        color: #ffb135;
        padding: 15px 0 15px 0px;
        letter-spacing: 1;
        position: relative;
        display: inline-block;
    }

    .nextTitle {
        font-size: 16px;
        color: #393d40;
    }

    .nextTitle a {
        color: #ffb135;
    }

    .selectNormal {
        padding: 6px 6px 6px 15px;
    }
</style>